<!--
 * @Author: zheng yong tao
 * @Date: 2022-01-15 17:37:07
 * @LastEditors: zheng yong tao
 * @LastEditTime: 2022-03-02 22:03:01
 * @Description: 
-->
<template>
  <div class="filing-list">
    <div
      class="filing"
      v-for="(filing, index) in filingList"
      :key="index + 'filing'"
    >
      <div class="filing-date">
        {{ filing.year }}
      </div>
      <template v-for="(month, monthind) in filing.monthList">
        <template v-if="month.length > 0">
          <div
            class="filling-month"
            :key="monthind + 'month'"
            :id="filing.year + '-' + (monthind + 1)"
          >
            {{ monthind + 1 }}月
          </div>
          <div
            class="filing-item"
            v-for="(item, ind) in month"
            :key="monthind + '-' + ind"
          >
            <span class="filing-item-time">{{ item.time }}</span>
            <span class="filing-item-title" @click="toDetail(item.id)">{{
              item.title
            }}</span>
            <div class="filing-item-line"></div>
          </div>
        </template>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: "filingList",
  props: {
    filingList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    toDetail(id) {
      this.$router.push({ name: "articleDetail", query: { id: id } });
    }
  }
};
</script>

<style lang="less" scoped>
.filing-list {
  background-color: white;
  // width: 60vw;
  // margin: auto;
  // margin-top: 1rem;
  // margin-left: 10vw;
  box-shadow: 10px 10px 5px #888888;
  padding: 2rem 2rem;
  padding-bottom: 3rem;
  font-family: cursive;
  border-radius: 5px;
  text-align: left;
  .filing {
    margin-top: 2rem;
    .filing-date {
      font-size: xx-large;
      font-weight: bold;
    }
    .filling-month {
      font-size: x-large;
      font-weight: bold;
      margin-left: 0.5em;
      color: orange;
      // border-bottom: orange 1px solid;
    }
    .filing-item {
      margin-top: 1rem;
      text-indent: 1em;
      font-size: large;
      cursor: pointer;
      &:hover {
        transform: translateX(4px);
        transition: all 0.2s ease-out 0s;
      }
      .filing-item-time {
        color: gray;
      }
      .filing-item-title {
        color: rgb(192, 91, 77);
        margin-left: 1rem;
        word-break: break-all;
      }
      .filing-item-line {
        height: 1px;
        background: rgb(199, 196, 196);
        width: 100%;
        margin-top: 0.5rem;
      }
    }
  }
}
</style>
